<template>
    <el-card>
        <div>最近一次更新时间：2019-12-11 12：12：59</div>
        <br />
        <div style="width: 80%;margin: auto;">
            <div >
                <vue-ueditor-wrap  v-model="detail" :config="myConfig"></vue-ueditor-wrap>
            </div>
            <br />
            <div style="text-align: center;">
              <el-button type="success" @click="setAboutUs">发布</el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
    export default {
        data(){
          return{
              detail: '',
              myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 500,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                // serverUrl: 'http://35.201.165.105:8000/controller.php',
                serverUrl: this.$api.ueditorUrl,
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
                UEDITOR_HOME_URL: '/UEditor/',
                zIndex: 10001,
                toolbars: [
                  [
                    'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'strikethrough',
                    'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
                    'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                    'simpleupload', 'insertvideo', 'music',
                    'horizontal', 'date', 'time',
                    'inserttable','link'

                  ]
                ]
              },
          }
        },
        methods: {
          //获取关于我们详情
          async getAboutUs(){
            const res = await this.$api.getAboutUs();
            if(res.data.level=='success'){
              this.detail = res.data.data.detail;
            }else {
            this.$message.error(res.data.message)

          }
          },

          //编辑关于我们
          async setAboutUs(){
            let params = {
              "detail": this.detail
            }
            const res = await this.$api.setAboutUs(params);
            if(res.data.level=='success'){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.getAboutUs()
            }else{
              this.$message({
                message: res.data.message,
                type: 'warning'
              });
            }
          },

        },
      mounted() {
          this.getAboutUs();
      },
      components:{
          VueUeditorWrap
        }
    }
</script>

<style scoped>

</style>
